<template>
	<div class="home backg_qiangray scrolls" :id="ID" v-cloak>
		<div style="position: relative;width: 100%;height: 100%;">
			<div class="scroll" style="position: absolute;right: 0;top: 0;height: 100%;width: 10px;background-color: black;z-index: 11111;">
				<div id="scroll_" style="position: absolute;right: 0;top: 0;height:100px;width: 10px;background-color: red;border-radius: 3px;"></div>
			</div>
			<!--内容区域-->
			<div class="content" ref='test'>
				<slot></slot>
			</div>
		</div>
	</div>
</template>

<script>
	
	export default {
		props: {
			ID: {
				type: String,
				default: 'scroll'
			},

		},
		data() {
			return {
				hidden :'',
				dom:''
			}
		},
		mounted() {
			var that = this;
			var dom = document.getElementById(this.ID) //组件id
			var scroll = document.querySelector('#' + this.ID + ' ' + '.scroll') //滚动条
			var content = document.querySelector('#' + this.ID + ' ' + '.content') //内容区域
			this.dom = $('.content')
			console.log(this.dom)
			
			that.drag($(scroll).children('#scroll_')[0])

			that.hidden  = setTimeout(function() {
					$(scroll).hide()
				}, 1000)
			window.onmousewheel = document.onmousewheel = that.scrollFunc; //IE/Opera/Chrome
			
			

		},
		methods: {
			observe(){
				//注册事件	
				var that = this;
				var dom = document.getElementById(this.ID) //组件id
				var scroll = document.querySelector('#' + this.ID + ' ' + '.scroll') //滚动条
				var content = document.querySelector('#' + this.ID + ' ' + '.content') //内容区域
				var p_h = $(content).height()
				var c_h = $(content).children('div').height()
				if(c_h > p_h) {
					//				alert()
					window.onmousewheel = document.onmousewheel = that.scrollFunc; //IE/Opera/Chrome
				}
	
				//监听div
				var MutationObserver = window.MutationObserver || window.WebKitMutationObserver || window.MozMutationObserver
	
				// 选择目标节点
				var target = $(content).children('div')[0];
	
				// 创建观察者对象
				var observer = new MutationObserver(function(mutations) {
					//				mutations.forEach(function(mutation) {
					//					console.log(mutation.type);
					//				});
					that.scroll_top()
				});
	
				// 配置观察选项:
				var config = {
					attributes: true,
					childList: true,
					characterData: true
				}
	
				// 传入目标节点和观察选项
				observer.observe(target, config);
			},
			scroll_top() {
				var that = this;
				var dom = document.getElementById(this.ID) //组件id
				var scroll = document.querySelector('#' + this.ID + ' ' + '.scroll') //滚动条
				var content = document.querySelector('#' + this.ID + ' ' + '.content') //内容区域
				//计算滚动条距离
				var p_h = $(content).height()
				var c_h = $(content).children('div').height()
				var top = $(content).scrollTop()
				var ab_top = top / c_h * p_h + 'px'
				
				if(p_h>c_h){
					return;
				}
				
				
				$(scroll).children('#scroll_').css({
					'top': ab_top,
					'height': p_h * p_h / c_h + 'px'
				})
			},
			scrollDir(e) {
				//判断滚轮方向
				if(e.wheelDelta) { //判断浏览器IE，谷歌滑轮事件               
					if(e.wheelDelta > 0) { //当滑轮向上滚动时  
						return 1;
					}
					if(e.wheelDelta < 0) { //当滑轮向下滚动时  
						return 0;
					}
				} else if(e.detail) { //Firefox滑轮事件  
					if(e.detail > 0) { //当滑轮向上滚动时  
						return 1;
					}
					if(e.detail < 0) { //当滑轮向下滚动时  
						return 0;
					}
				}
			},
			scrollFunc(e){
				
				var that = this;
				var dom = document.getElementById(this.ID) //组件id
				var scroll = document.querySelector('#' + this.ID + ' ' + '.scroll') //滚动条
				var content = document.querySelector('#' + this.ID + ' ' + '.content') //内容区域
				e = e || window.event;
				var p_h = $(content).height()
				var c_h = $(content).children('div').height()
				var top = $(content).scrollTop()
				
				if(p_h>=c_h){
					return;
				}
				
				console.log(top)
				$(scroll).show()
				if(that.scrollDir(e)) {
					top = top - 30
					if(top < 0) {
						top = 0
					}
				} else {
					//向下
					top = top + 20
					if(top > c_h - p_h) {
						top = c_h - p_h
					}

				}
				var ab_top = top / c_h * p_h + 'px'
				$(scroll).children('#scroll_').css({
					'top': ab_top,
					'height': p_h * p_h / c_h + 'px'
				})
				console.log(top)
				$(content).scrollTop(top)
				window.clearTimeout(that.hidden)
				that.hidden = setTimeout(function() {
					$(scroll).hide()
				}, 1000)

			},
			drag(obj) {
				var that = this;
				var dom = document.getElementById(this.ID) //组件id
				var scroll = document.querySelector('#' + this.ID + ' ' + '.scroll') //滚动条
				var content = document.querySelector('#' + this.ID + ' ' + '.content') //内容区域
				$(scroll).children('#scroll_').css({
					'height': $(content).height() * $(content).height() / $(content).children('div').height() + 'px'
				})
				if(typeof obj == "string") {
					var obj = document.getElementById(obj);
					//					obj.orig_index = obj.style.zIndex;
					//设置当前对象永远显示在最上层
				}
				console.log(obj)
				obj.onmousedown = function(a) {
					console.log(a)
					//					alert(1)
					window.clearTimeout(that.hidden)

					//鼠标按下
					this.style.cursor = "move";
					//设置鼠标样式
					this.style.zIndex = 1000;
					var d = document;
					if(!a) a = window.event;
					//按下时创建一个事件
					var x = a.clientX - document.body.scrollLeft - obj.offsetLeft;
					//x=鼠标相对于网页的x坐标-网页被卷去的宽-待移动对象的左外边距
					var y = a.clientY - document.body.scrollTop - obj.offsetTop;
					//y=鼠标相对于网页的y左边-网页被卷去的高-待移动对象的左上边距
					d.onmousemove = function(a) { //鼠标移动

						if(!a) a = window.event; //移动时创建一个事件
						console.log(a.clientY + document.body.scrollTop - y)
						obj.style.left = a.clientX + document.body.scrollLeft - x;

						var top = a.clientY + document.body.scrollTop - y
						if(top < 0) {
							top = 0
						}
						var p_h = $(scroll).height()
						var c_h = $(scroll).children('#scroll_').height()
						if(top > p_h - c_h) {
							top = p_h - c_h
						}

						var p_h = $(content).height()
						var c_h = $(content).children('div').height()
						obj.style.top = top + 'px';
						var ab_top = top / p_h * c_h
						console.log(ab_top)
						var top = $(content).scrollTop(ab_top)

					}
					d.onmouseup = function() { //鼠标放开
						document.onmousemove = null;
						document.onmouseup = null;
						obj.style.cursor = "normal"; //设置放开的样式
						obj.style.zIndex = obj.orig_index;
						that.hidden = setTimeout(function() {
							$(scroll).hide()
						}, 1000)
					}
				}
			}
		}
	}
</script>
<style lang="less" scoped>
	.scrolls {		
		position: relative;
		.content {
			height: 100%;
			width: 100%;
			/*border: 1px solid black;*/
			box-shadow: 0 0 1px 0 black;
			overflow: hidden;
			position: relative;
		}
		p {
			display: block;
			height: 20px;
			margin: 0;
		}
		.scroll {
			display: none;
			>div {
				position: absolute;
				left: 0;
				top: 0;
			}
		}
	}
</style>